<template>
    <view class="content">
        <view class="info">
            <h3>{{ addForm.folderName }}</h3>
            <view class="author">作者姓名：{{ addForm.author }}</view>
            <view class="blurb">课程简介：{{ addForm.introduction }}</view>
        </view>
        <view class="title">视频组菜单：</view>
        <Tree
            ref="tree"
            :range="tableData"
            :rangeKey="rangeKey"
            :idKey="idKey"
            @handlePlayer="handlePlayer"
        />
    </view>
</template>

<script>
import Tree from "@/components/tree/courseTree.vue";
export default {
    components: {
        Tree,
    },
    data() {
        return {
            author: "",
            name: "",
            list: [
                // 示例1
                {
                    id: 1,
                    name: "河北省",
                    children: [
                        { id: 10, name: "石家庄" },
                        { id: 20, name: "唐山" },
                        { id: 30, name: "秦皇岛" },
                    ],
                },
                // 示例2
                {
                    id: 3,
                    name: "中国",
                    children: [
                        { id: 100, name: "海南省" },
                        {
                            id: 200,
                            name: "河北省",
                            children: [{ id: 999, name: "衡水市" }],
                        },
                    ],
                },
                // 示例3
                {
                    id: 2,
                    name: "北京市",
                },
            ],
            rangeKey: "chapterName",

            // 指定 Object 中 key 的值作为单条数据的唯一id
            // 跟上面的类似,一个道理，只不过这个是标识的唯一id键名
            idKey: "id",
            info: {},
            id: "",
            addForm: {},
            tableData: [],
        };
    },
    methods: {
        getVideoDetail() {
            this.$request({
                url: "/knowledgeFile/video/detail",
                method: "get",
                params: {
                    id: this.id,
                },
            }).then((data) => {
                console.log(data, "ddd");
                if (data.code == 200) {
                    this.addForm = data.data.course;
                    this.tableData = data.data.video && [data.data.video];
                }
            });
        },
        //视频播放
        handlePlayer(row) {
            console.log(row, "视频播放");
            if (row.videoType === 1) {
                this.$tab.navigateTo(
                    `/pages/player?info=${encodeURIComponent(
                        JSON.stringify(row)
                    )}`
                );
            } else {
                this.$tab.navigateTo(
                    `/pages/preview?info=${encodeURIComponent(
                        JSON.stringify(row)
                    )}`
                );
            }
        },
    },
    onLoad(options) {
        this.id = options.id;
    },
    mounted() {
        this.getVideoDetail();
    },
};
</script>

<style lang="scss" scoped>
.content {
    padding: 30rpx;
    .info {
        padding: 20rpx;
        line-height: 44rpx;
        border-radius: 5px;
        background: #fff;
        // margin-bottom: 30rpx;
        .author,
        .blurb {
            font-size: 14px;
            margin-top: 10px;
            gap: 30rpx;
        }
    }
    h3 {
        flex: 1;
        padding: 0;
        margin: 0;
        font-weight: 550;
        font-size: 16px;
        line-height: 34px;
    }
    .title {
        display: flex;
        align-items: center;
        padding: 20rpx 20rpx 0;
        font-weight: 550;
        margin-top: 20rpx;
        background: #fff;
    }
}
</style>
